<template>
    <div id="response">
        <div class="card-container">
            <div class="body-title">
                <div class="body-title-left">速报响应</div>
                <!-- <div class="body-title-right">
                    <el-button   v-hasPermi="['drill:add']" @click="handleAdd">新增演练
                    </el-button>
                </div> -->
            </div>
            <el-table :data="tableData" height="550" :row-class-name="getRowClass" style="width: 100%">
                <el-table-column prop="earthquakeQuickReportVO.createTime" align="center" show-overflow-tooltip label="创建时间"
                    width="240">
                </el-table-column>
                <!-- <el-table-column prop="msgType" align="center" show-overflow-tooltip label="信息类型">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_report_type" :value="scope.row.earthquakeQuickReportPO.msgType" />
                    </template>
                </el-table-column> -->

                <el-table-column align="center" label="地震信息" width="360">
                    <template slot-scope="scope">
                        <div class="eewMessage">
                            <div>
                                <div style="flex: 1">时间：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.oritime || "--" }}</div>
                            </div>

                            <div>
                                <div style="flex: 1">震级：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.magnitude || "--" }}级</div>
                            </div>

                            <div>
                                <div style="flex: 1">深度：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.focdepth || "--" }}km</div>
                            </div>
                            <div>
                                <div style="flex: 1">经度：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.epiLon || "--" }}°</div>
                            </div>
                            <div>
                                <div style="flex: 1">纬度：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.epiLat || "--" }}°</div>
                            </div>
                            <div>
                                <div style="flex: 1">地名：</div>
                                <div style="flex: 6">{{ scope.row.earthquakeQuickReportVO.locname || "--" }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="响应信息" width="400" prop="projectResponseRateVOList">
                    <template slot-scope="scope">
                        <el-tree :data="scope.row.projectResponseRateVOList" :style="`height:150px;overflow-y: auto;`"
                            default-expand-all>
                            <span class="custom-tree-node" slot-scope="{data}">
                                <span>{{ data.name }}</span>
                            </span>
                        </el-tree>
                    </template>
                </el-table-column>
                <el-table-column align="center" min-width="150" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleChart(scope.row)">
                            热力图
                        </el-button>
                        <el-button type="text" @click="handleInfo(scope.row)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
        <el-dialog :title="'热力图'" :close-on-click-modal="false" v-if="chartVisible" :visible.sync="chartVisible"
            width="80%">
            <div class="card-container">
                <chart :rowData="rowData" />
            </div>
        </el-dialog>
        <el-dialog :title="'详情'" :close-on-click-modal="false" :before-close="closeDialog" v-if="detailVisible"
            :visible.sync="detailVisible" width="80%">
            <div class="card-container">
                <el-row :gutter="10">
                    <el-form :model="queryInfoParams" label-width="100px" ref="queryInfoForm" :inline="true">
                        <el-col :span="19" :offset="0">
                            <el-form-item label="项目名称" prop="projectId">
                                <el-select v-model="queryInfoParams.projectId" clearable :style="'width:215px'"
                                    placeholder="请选择项目名称">
                                    <el-option v-for="item in projectList" :key="item.projectId" :label="item.shortName"
                                        :value="item.projectId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="设备SN" prop="deviceCode">
                                <el-input v-model="queryInfoParams.deviceCode" :style="'width:215px'" placeholder="请输入设备序列号"
                                    clearable size="small" @keyup.enter.native="handleQuery" />
                            </el-form-item>
                            <el-form-item label="震时在线状态" prop="onlineStatus">
                                <el-select v-model="queryInfoParams.onlineStatus" clearable :style="'width:215px'"
                                    placeholder="请选择震时在线状态">
                                    <el-option v-for="item in this.dict.type.sys_on_line_status" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否收到预警" prop="isReceiveWarning">
                                <el-select v-model="queryInfoParams.isReceiveWarning" clearable :style="'width:215px'"
                                    placeholder="请选择是否收到预警">
                                    <el-option v-for="item in this.dict.type.sys_reveice_status" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="响应状态" prop="isResponse">
                                <el-select v-model="queryInfoParams.isResponse" clearable :style="'width:215px'"
                                    placeholder="请选择响应状态">
                                    <el-option v-for="item in this.dict.type.sys_reveice_status" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5" :offset="0">
                            <el-form-item>
                                <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索
                                </el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
            <div class="card-container">
                <el-table :data="detailData">
                    <el-table-column prop="projectName" align="center" show-overflow-tooltip label="项目名称" min-width="100" />
                    <el-table-column prop="deviceCode" align="center" show-overflow-tooltip label="设备SN" min-width="110" />
                    <el-table-column prop="deviceType" align="center" show-overflow-tooltip label="设备类型" min-width="80">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_device_mode" :value="scope.row.deviceType" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="model" align="center" show-overflow-tooltip label="设备型号" min-width="80" />
                    <el-table-column prop="longitude" align="center" show-overflow-tooltip label="设备经度" min-width="80" />
                    <el-table-column prop="latitude" align="center" show-overflow-tooltip label="设备纬度" min-width="80" />
                    <el-table-column prop="address" align="center" show-overflow-tooltip label="设备地址" min-width="150" />
                    <el-table-column prop="onlineStatus" align="center" show-overflow-tooltip label="震时在线状态" min-width="80">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_on_line_status" :value="scope.row.onlineStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="isReceiveWarning" align="center" show-overflow-tooltip label="是否收到预警"
                        min-width="80">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_reveice_status" :value="scope.row.isReceiveWarning" />
                        </template> </el-table-column>
                    <el-table-column prop="isResponse" align="center" show-overflow-tooltip label="响应状态" min-width="80">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_respon_status" :value="scope.row.isResponse" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="localIntensity" align="center" show-overflow-tooltip label="本地预估烈度"
                        min-width="80" />
                    <el-table-column prop="deviceIntensity" align="center" show-overflow-tooltip label="设备烈度"
                        min-width="80" />
                </el-table>
                <pagination v-show="detailTotal > 0" :total="detailTotal" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getInfo" />
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { getresponseStatisticsList, getDetailList } from '@/api/responseStatistics/index.js'
import { getProject } from "@/api/runningLog/runningLog.js";
import chart from './chart.vue'
export default {
    dicts: [
        "sys_on_line_status",
        "sys_report_type",
        'sys_respon_status',
        'sys_reveice_status',
        "sys_device_mode"
    ],
    components: {
        chart
    },
    data() {
        return {
            tableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            chartVisible: false,
            detailVisible: false,
            rowData: {},
            detailData: [],
            queryInfoParams: { pageNum: 1, pageSize: 10, projectId: null, deviceCode: null, onlineStatus: null, isReceiveWarning: null },
            detailTotal: 0,
            projectList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getConfig() {
            const res = await getProject();
            if (res.code == 200) {
                this.projectList = res.data;
            }
        },
        async getList() {
            const res = await getresponseStatisticsList(this.queryParams);
            if (res.code == 200) {
                this.tableData = res.rows;
                this.tableData.forEach((item, index) => {
                    if (item.projectResponseRateVOList.length > 0) {
                        item.projectResponseRateVOList.forEach((obj, i) => {
                            obj.name = obj.projectName
                            obj.id = obj.projectId
                            obj.children = [{

                            }]
                            obj.children[0].name = `设备总数：${obj.totalSum}
响应数量：${obj.responseSum}
响应比例：${obj.ratio}
    响应率：${obj.responseRate}%`
                        })
                    }
                })
                console.log(this.tableData, 'this.tableData')
                this.total = res.total;
            }
        },
        getRowClass(row, rowIndex) {
            if (row.row.normalWarnings) {
                if (row.row.normalWarnings.length === 0) {
                    return "row-expand-cover";
                }
            } else {
                return "row-expand-cover";
            }
        },
        formatlevel(val) {
            switch (val) {
                case '无预警':
                    return '无预警（灰色）'
                case 'Ⅳ级':
                    return '蓝色预警'
                case 'Ⅲ级':
                    return '黄色预警'
                case 'Ⅱ级':
                    return '橙色预警'
                case 'Ⅰ级':
                    return '红色预警'
                default:
                    break;
            }
        },
        // 详情
        handleInfo(row) {
            this.getConfig()
            this.detailVisible = true
            this.queryInfoParams.eewId = row.earthquakeQuickReportVO.eewId
            this.getInfo()
        },
        // 热力图
        handleChart(row) {
            console.log(row, 'eewId')
            this.rowData = row
            this.chartVisible = true
        },

        async getInfo() {
            const res = await getDetailList(this.queryInfoParams)
            if (res.code == 200) {
                this.detailData = res.rows
                this.detailTotal = res.total
                console.log(res, 'earthquakeQuickReportVO.eewId')
            }
        },

        handleQuery() {
            this.queryInfoParams.pageNum = 1
            this.getInfo()
            console.log(1)
        },
        resetQuery() {
            this.resetForm("queryInfoForm");
            this.handleQuery();
            console.log(2)
        },
        closeDialog() {
            this.resetForm("queryInfoForm");
            this.detailVisible = false
        }
    }
}
</script>

<style lang="scss" scoped>
#response {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.body-title {
    display: flex;
    position: relative;
    // justify-content: space-between;
    align-items: center;
}

.body-title-left {
    height: 100%;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #fff;
    line-height: 64px;
}

.body-title-right {
    position: absolute;
    right: 0;
}

.eewMessage {
    >div {
        display: flex;
        text-align: left;
    }
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 20px 0 20px;
    font-weight: 700;
    font-size: 16px;
}


::v-deep .custom-tree-node {
    >span {
        color: var(--inputColor);
    }
}

::v-deep .el-tree-node__content {
    white-space: pre-wrap;
    text-align: left;
    height: 100%;
}

::v-deep .el-tree-node__content:hover,
.el-upload-list__item:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #0095ff;
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
    background: rgba(0, 149, 255, 0.1);
}

::v-deep .tableInput {
    display: inline;
}

::v-deep .tableInput .el-input__inner {
    padding: 0 5px;
    text-align: center;
    width: 30px;
}
</style>